html,body,div{
	box-sizing: border-box;
}

.box{
	width: 300px;
	height: 400px;
	margin:0 auto;
	margin-top: 100px;
	border: 2px solid #333;
	background-color: #eee;
}

.clock{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: gray;
	margin: 0 auto;
	margin-top: 80px;
	box-shadow: 
		130px 0 0 -90px #222,
		-130px 0 0 -90px #222,
		0 130px 0 -90px #222,
		0 -130px 0 -90px #222;
}

.second{
	position: absolute;
	width: 90px;
	height: 4px;
	top:98px;
	left: 10px;
	background-color: skyblue;
	transform-origin:right center;
	animation:second 60s steps(60,end) infinite;
}
@keyframes second{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(360deg);
	}
}

.minute{
	position: absolute;
	width: 60px;
	height: 6px;
	top:97px;
	left: 40px;
	transform:rotate(60deg);
    transform-origin:right center;
	background-color: purple;
	animation:minute 3600s linear infinite;
}
@keyframes minute{
	from{
		transform:rotate(30deg);
	}
	to{
		transform:rotate(360deg);
	}
}


.hour{
	position: absolute;
	width: 40px;
	height: 7px;
	top:98.5px;
	left: 60px;
	transform:rotate(-30deg);
    transform-origin:right center;
	background-color: green;
	animation:hour 216000s linear infinite;
}
@keyframes hour{
	from{
		transform:rotate(-30deg);
	}
	to{
		transform:rotate(360deg);
	}
}

.dot{
	position: absolute;
	left: 96px;
	top:96px;
	width: 8px;
	height: 8px;
	background-color: orange;
	border-radius: 50%;
}




